<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="mall/header::head-fragment('休闲服装-首页','index')">
</head>
<body>
<header th:replace="mall/header::header-fragment"></header>
<content id="content">
    <nav th:replace="mall/header::nav-fragment"></nav>
    <div id="banner">
        <div class="all-sort-list">
            <th:block th:each="category : ${categories}">
            <div class="item">
                <h3><span>·</span><a href="##"><th:block th:text="${category.categoryName}"></th:block></a></h3>
                <div class="item-list clearfix">
                    <div class="subitem">
                        <th:block th:each="secondLevelCategory : ${category.secondLevelCategoryVOS}">
                        <dl class="fore1">
                            <dt><a href="#"><th:block th:text="${secondLevelCategory.categoryName}"></th:block></a></dt>
                            <dd>
                                <th:block th:each="thirdLevelCategory : ${secondLevelCategory.thirdLevelCategoryVOS}">
                                <em><a href="#"th:href="@{'/search?goodsCategoryId='+${thirdLevelCategory.categoryId}}">
                                    <th:block th:text="${thirdLevelCategory.categoryName}"></th:block>
                                </a></em>
                                </th:block>
                            </dd>
                        </dl>
                        </th:block>
                    </div>
                </div>
            </div>
            </th:block>
        </div>
        <div class="swiper-container fl">
            <div class="swiper-wrapper">
                <!-- 配置了轮播图则显示后台配置的轮播图 -->
                <th:block th:unless="${#lists.isEmpty(carousels)}">
                    <th:block th:each="carousel : ${carousels}">
                        <div class="swiper-slide">
                            <a th:href="@{${carousel.redirectUrl}}">
                                <img th:src="@{${carousel.carouselUrl}}" alt="">
                            </a>
                        </div>
                    </th:block>
                </th:block>
                <!-- 未配置轮播图则显示默认的三张轮播图 -->
                <th:block th:if="${#lists.isEmpty(carousels)}">
                    <div class="swiper-slide">
                        <img src="./mall/image/swiper/banner01.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="./mall/image/swiper/banner02.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="./mall/image/swiper/banner03.jpg" alt="">
                    </div>
                </th:block>
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </div>

    <div id="sub_banner">
        <!-- 已配置热销商品则显示配置内容 -->
        <th:block th:unless="${#lists.isEmpty(hotGoodses)}">
            <th:block th:each="hotGoodse : ${hotGoodses}">
                <div class="hot-image">
                    <a th:href="@{'/goods/detail/'+${hotGoodse.goodsId}}">
                        <img th:src="@{${hotGoodse.goodsCoverImg}}" th:alt="${hotGoodse.goodsName}">
                    </a>
                </div>
            </th:block>
        </th:block>
        <!-- 未配置热销商品则显示默认 -->
        <th:block th:if="${#lists.isEmpty(hotGoodses)}">
            <div class="hot-image">
                <a href="http://localhost:8080/goods/detail/10909">
                    <img src="./mall/image/sub_banner/ql1.jpg" alt="">
                </a>
            </div>
            <div class="hot-image">
                <a href="http://localhost:8080/goods/detail/10936">
                    <img src="./mall/image/sub_banner/ql2.jpg" alt="">
                </a>
            </div>
            <div class="hot-image">
                <a href="http://localhost:8080/goods/detail/10938">
                    <img src="./mall/image/sub_banner/ql3.jpg" alt="">
                </a>
            </div>
            <div class="hot-image">
                <a href="http://localhost:8080/goods/detail/10937">
                    <img src="./mall/image/sub_banner/ql4.jpg" alt="">
                </a>
            </div>
        </th:block>
    </div>

    <div id="flash">
        <h2>新品上线</h2>
        <ul>
            <!-- 已配置新品则显示配置内容 -->
            <th:block th:unless="${#lists.isEmpty(newGoodses)}">
                <th:block th:each="newGoods : ${newGoodses}">
                    <li>
                        <a th:href="@{'/goods/detail/'+${newGoods.goodsId}}">
                            <img th:src="@{${newGoods.goodsCoverImg}}" th:alt="${newGoods.goodsName}">
                            <p class="name" th:text="${newGoods.goodsName}">NewBeeMall</p>
                            <p class="discount" th:text="${newGoods.goodsIntro}">NewBeeMall</p>
                            <p class="item_price" th:text="${newGoods.sellingPrice}">NewBeeMall</p>
                        </a>
                    </li>
                </th:block>
            </th:block>
            <!-- 未配置则显示默认 -->
            <th:block th:if="${#lists.isEmpty(newGoodses)}">
                <li>
                    <a href="##">
                        <img src="./mall/image/sub_banner/air.jpg" alt=""/>
                       <p class="name"> 休闲服装</p>
                        <p class="discount">休闲T恤</p>
                        <p class="price">99元起</p>
                    </a>
                </li>
                <li>
                    <a href="##">
                        <img src="./mall/image/sub_banner/baby-car.jpg" alt=""/>
                        <p class="name"> 休闲服装</p>
                        <p class="discount">休闲T恤</p>
                        <p class="price">99元起</p>
                    </a>
                </li>
                <li>
                    <a href="##">
                        <img src="./mall/image/sub_banner/sp1.jpg" alt=""/>
                        <p class="name"> 休闲服装</p>
                        <p class="discount">休闲T恤</p>
                        <p class="price">99元起</p>
                    </a>
                </li>
                <li>
                    <a href="##">
                        <img src="./mall/image/sub_banner/sp2.jpg" alt=""/>
                        <p class="name"> 休闲服装</p>
                        <p class="discount">休闲T恤</p>
                        <p class="price">99元起</p>
                    </a>
                </li>
                <li>
                    <a href="##">
                        <img src="./mall/image/sub_banner/sp3.jpg" alt=""/>
                        <p class="name"> 休闲服装</p>
                        <p class="discount">休闲T恤</p>
                        <p class="price">99元起</p>
                    </a>
                </li>
            </th:block>
        </ul>
    </div>

    <div id="recommend">
        <h2>为你推荐</h2>
        <a href="##" class="more">查看更多>></a>
        <ul>
            <!-- 已配置推荐商品则显示配置内容 -->
            <th:block th:unless="${#lists.isEmpty(recommendGoodses)}">
                <th:block th:each="recommendGoods : ${recommendGoodses}">
                    <li>
                        <a th:href="@{'/goods/detail/'+${recommendGoods.goodsId}}">
                            <div class="info discount" th:text="${recommendGoods.tag}">
                                新品
                            </div>
                            <img th:src="@{${recommendGoods.goodsCoverImg}}" th:alt="${recommendGoods.goodsName}">
                            <p class="name" th:text="${recommendGoods.goodsName}">NewBeeMall</p>
                            <p class="item_price" th:text="${recommendGoods.sellingPrice}">NewBeeMall</p>
                            <p class="counter">猜你喜欢</p>
                            <div class="comment">
                                <p>休闲服装</p>
                                <p>好物也可以不贵</p>
                            </div>
                        </a>
                    </li>
                </th:block>
            </th:block>
            <!-- 未配置则显示默认 -->
            <th:block th:if="${#lists.isEmpty(recommendGoodses)}">
                <li>
                    <a href="##">
                        <div class="info discount">
                            新品
                        </div>
                        <img src="./mall/image/sub_banner/boy1.jpg" alt=""/>
                        <p class="name">男装休闲</p>
                        <p class="price">149元</p>
                        <p class="counter">猜你喜欢</p>
                        <div class="comment">
                            <p>休闲服装</p>
                            <p>好物也可以不贵</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="##">
                        <div class="info discount">
                            5折起
                        </div>
                        <img src="./mall/image/sub_banner/boy2.jpg" alt=""/>
                        <p class="name">男装休闲</p>
                        <p class="price">149元</p>
                        <p class="counter">猜你喜欢</p>
                        <div class="comment">
                            <p>休闲服装</p>
                            <p>好物也可以不贵</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="##">
                        <div class="info discount">
                            新品
                        </div>
                        <img src="./mall/image/sub_banner/boy3.jpg" alt=""/>
                        <p class="name">男装休闲 M6</p>
                        <p class="price">199元</p>
                        <p class="counter">猜你喜欢</p>
                        <div class="comment">
                            <p>休闲服装</p>
                            <p>好物也可以不贵</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="##">
                        <div class="info discount">
                            官降
                        </div>
                        <img src="./mall/image/sub_banner/boy4.jpg" alt=""/>
                        <p class="name">男装休闲</p>
                        <p class="price">199元</p>
                        <p class="counter">猜你喜欢</p>
                        <div class="comment">
                            <p>休闲</p>
                            <p>好物也可以不贵</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="##">
                        <div class="info discount">
                            新品
                        </div>
                        <img src="./mall/image/sub_banner/boy5.jpg" alt=""/>
                        <p class="name">男装休闲</p>
                        <p class="price">199元</p>
                        <p class="counter">猜你喜欢</p>
                        <div class="comment">
                            <p>休闲</p>
                            <p>好物也可以不贵</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="##">
                        <div class="info discount">
                            热销
                        </div>
                        <img src="./mall/image/sub_banner/girl1.jpg" alt=""/>
                        <p class="name">女装休闲</p>
                        <p class="price">199元</p>
                        <p class="counter">猜你喜欢</p>
                        <div class="comment">
                            <p>休闲</p>
                            <p>好物也可以不贵</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="##">
                        <div class="info discount">
                            享折扣
                        </div>
                        <img src="./mall/image/sub_banner/girl2.jpg" alt=""/>
                        <p class="name">女装休闲</p>
                        <p class="price">149元</p>
                        <p class="counter">猜你喜欢</p>
                        <div class="comment">
                            <p>休闲</p>
                            <p>好物也可以不贵</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="##">
                        <div class="info discount">
                            最低价
                        </div>
                        <img src="./mall/image/sub_banner/girl3.jpg" alt=""/>
                        <p class="name">女装休闲 </p>
                        <p class="price">199元</p>
                        <p class="counter">猜你喜欢</p>
                        <div class="comment">
                            <p>新潮流</p>
                            <p>好物也可以不贵</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="##">
                        <div class="info discount">
                            热销
                        </div>
                        <img src="./mall/image/sub_banner/girl4.jpg" alt=""/>
                        <p class="name">女装休闲 </p>
                        <p class="price">199元</p>
                        <p class="counter">猜你喜欢</p>
                        <div class="comment">
                            <p>休闲</p>
                            <p>好物也可以不贵</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="##">
                        <div class="info discount">
                            热销
                        </div>
                        <img src="./mall/image/sub_banner/girl5.jpg" alt=""/>
                        <p class="name">女装休闲</p>
                        <p class="price">199元</p>
                        <p class="counter">猜你喜欢</p>
                        <div class="comment">
                            <p>休闲</p>
                            <p>好物也可以不贵</p>
                        </div>
                    </a>
                </li>
            </th:block>
        </ul>
    </div>
</content>
<div th:replace="mall/footer::footer-fragment"></div>
<!-- jQuery -->
<script th:src="@{/admin/plugins/jquery/jquery.min.js}"></script>
<script th:src="@{/mall/js/search.js}" type="text/javascript"></script>
<!-- jQuery UI 1.11.4 -->
<script th:src="@{/admin/plugins/jQueryUI/jquery-ui.min.js}"></script>
<!-- Bootstrap 4 -->
<script th:src="@{/admin/plugins/bootstrap/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/mall/js/swiper.min.js}" type="text/javascript"></script>
<script th:src="@{/admin/plugins/sweetalert/sweetalert.min.js}"></script>
<script th:src="@{/mall/js/index.js}" type="text/javascript"></script>
<script th:src="@{/mall/js/search.js}" type="text/javascript"></script>
</body>
</html>